<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>二维码详情</title>
    <link rel="icon" href="data:,">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <meta name="format-detection" content="telephone=no"> 
    <style type="text/css">
        body,html{
            background-color: #f8f8f8;
            padding: 0px;
            margin: 0px;
            width: 100%;
            height: 100%;
            color: #484848;
        }
        .content{
            width: 100%;
            height: 100%;
            max-width: 500px;
            margin: 0px auto;
            display: none;
        }
        .content-article{
            width: 90%;
            height: auto;
            float: left;
            margin: 30% 5%;
            background-color: #FFFFFF;
            border-radius: 10px;
            padding: 18px;
            box-sizing: border-box;
        }
        .content-article-full{
            width: 100%;
            height: auto;
            float: left;
            background-color: #FFFFFF;
            display: none;
        }
        .content-article-full img{
            width: 100%;
            height: auto;
            float: left;
            background-color: #FFFFFF;
        }
        .content-article-header{
            width: 100%;
            height: 60px;
        }
        .content-article-header img{
            width: 60px;
            height: 60px;
            float: left;
            border-radius: 5px;
        }
        .content-article-header-right{
            width: 100%;
            height: 60px;
            box-sizing: border-box;
            margin-top: -60px;
            float: left;
            padding: 5px 0 5px 70px;
        }
        .content-article-header-right h3{
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 1.1rem;
            float: left;
            margin: 0px;
            padding: 0px;
            font-weight: 500;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        .content-article-header-right h5{
            width: 100%;
            height: 20px;
            line-height: 20px;
            font-size: 1rem;
            float: left;
            margin: 0px;
            padding: 0px;
            color: #999998;
            font-weight: 400;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        .content-article-qrcode{
            width: 100%;
            float: left;
            margin: 20px 0px;
        }
        .content-article-footer{
            width: 100%;
            float: left;
            text-align: center;
            font-size: 1rem;
            font-weight: 300;
            height: 20px;
            line-height: 20px;
            color: #666666;
        }
        .public-container{
            width: 100%;
            float: left;
            text-align: center;
            display: none;
        }
        .error-images{
            width: 80px;
            height: 80px;
            margin: 50px auto 10px auto;
        }
        .error-msg{
            width: 100%;
            float: left;
            line-height: 30px;
            text-align: center;
            padding: 0px 15px;
            box-sizing: border-box;
            color: #666666;
            font-size: 15px;
        }
    </style>
    <script src="https://nilife.oss-cn-beijing.aliyuncs.com/miniapp/images/setting/jquery-3.5.1-min.js"></script>
</head>
<body>
    <div id="article_error" class="public-container">
        <img class="error-images" src="">
        <p class="error-msg">加载中,请稍等...</p>
    </div>
    <div class="content">
        <div class="content-article">
            <div class="content-article-header">
                <img src="" id="content-article-header-img">
                <div class="content-article-header-right">
                    <h3></h3>
                    <h5></h5>
                </div>
            </div>
            <img class="content-article-qrcode" src="" id="qrcode">
            <div class="content-article-footer">
                长按识别上方二维码加我微信
            </div>
        </div>
        <div class="content-article-full">
            <img id="full_qrcode" src="">
        </div>
    </div>
    <script type="text/javascript">
        var links_id = "";
        $(document).ready(function(){
            links_id = getUrlParam("links_id");
            kefuQrcodeDetial();

            $("#qrcode").on({  
                touchstart: function(e) {
                    // 长按事件触发  
                    timeOutEvent = setTimeout(function() {  
                        timeOutEvent = 0;
                        kefuQrcodePress();
                    }, 1000);  
                },  
                touchmove: function() {  
                    clearTimeout(timeOutEvent);  
                    timeOutEvent = 0;  
                },  
                touchend: function() {  
                    clearTimeout(timeOutEvent);  
                    if (timeOutEvent != 0) {  
                    }  
                    return false;  
                }  
            })
            $("#full_qrcode").on({  
                touchstart: function(e) {
                    // 长按事件触发  
                    timeOutEvent = setTimeout(function() {  
                        timeOutEvent = 0;
                        kefuQrcodePress();
                    }, 1000);  
                },  
                touchmove: function() {  
                    clearTimeout(timeOutEvent);  
                    timeOutEvent = 0;  
                },  
                touchend: function() {  
                    clearTimeout(timeOutEvent);  
                    if (timeOutEvent != 0) {  
                    }  
                    return false;  
                }  
            })
        });

        function kefuQrcodeDetial() {
            var query = window.location.search;
            var qrcodeInfo = JSON.parse(localStorage.getItem("qrcode_"+links_id) || '{"links_id":""}');
            if (qrcodeInfo.links_id == "") {
                $.ajax({
                    url:"https://bab.moreqifu.cn/api/version/1/kefu/qrcode"+query,
                    data:{},
                    success:function(result){
                        if (result.status == "success") {
                            localStorage.setItem("qrcode_"+links_id,JSON.stringify(result.data));
                            renderQrcode(result.data);
                        } else {
                            $("#article_error").show();
                            $(".error-images").attr("src","https://nilife.oss-cn-beijing.aliyuncs.com/miniapp/images/setting/error.png");
                            $(".error-msg").html(result.msg);
                        }
                    }
                });
            } else {
                renderQrcode(qrcodeInfo);
            }
        }

        function renderQrcode(qrcodeInfo) {
            $("#article_error").hide();
            $(".content").show();
            $("title").html(qrcodeInfo.title);
            if (qrcodeInfo.miniapp_style == 1) {
                $("title").text(qrcodeInfo.nike);
                $(".content-article").show();
                $(".content-article-full").hide();
                $("#content-article-header-img").attr("src",qrcodeInfo.logo);
                $(".content-article-header h3").html(qrcodeInfo.nike);
                $(".content-article-header h5").html(qrcodeInfo.describe);
                $(".content-article-qrcode").attr("src",qrcodeInfo.qrcodes_img_url);
                var weixin = isWeiXin();
                if (weixin) {
                    $(".content-article-footer").html(qrcodeInfo.qrcode_notice);
                } else {
                    var mobile = isMobile();
                    if (mobile) {
                        $(".content-article-footer").html("请截图到微信内扫码");
                    } else {
                        $(".content-article-footer").html("请使用微信扫描上方二维码");
                    }
                }
            } else {
                $(".content-article").hide();
                $(".content-article-full").show();
                $("#full_qrcode").attr("src",qrcodeInfo.qrcodes_img_url);
                var weixin = isWeiXin();
                if (!weixin) {
                    var mobile = isMobile();
                    if (mobile) {
                        $(".content-article-full").append('<div class="content-article-footer">请截图到微信内扫码</div>');
                    } else {
                        $(".content-article-full").append('<div class="content-article-footer">请使用微信扫描上方二维码</div>');
                    }
                }
            }
        }

        function getUrlParam(paraName) {
            var url = document.location.toString();
            var arrObj = url.split("?");
            if (arrObj.length > 1) {
                var arrPara = arrObj[1].split("&");
                var arr;

                for (var i = 0; i < arrPara.length; i++) {
                    arr = arrPara[i].split("=");

                    if (arr != null && arr[0] == paraName) {
                        return arr[1];
                    }
                }
                return "";
            }
            else {
                return "";
            }
        }

        function kefuQrcodePress() {
            var qrcode_press = localStorage.getItem("qrcode_press_"+links_id) || 1;
            if (qrcode_press == 1) {
                var query = window.location.search;
                $.ajax({
                    url:"https://bab.moreqifu.cn/api/version/1/kefu/qrcode_press"+query,
                    data:{},
                    success:function(result){
                        if (result.status == "success") {
                            localStorage.setItem("qrcode_press_"+links_id,2);
                        } else {
                        }
                    }
                });
            }
        }

        //判断是否是微信浏览器的函数
        function isWeiXin(){
            var ua = navigator.userAgent.toLowerCase()
            var isWXWork = ua.match(/wxwork/i) == 'wxwork'
            var isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'
            return isWeixin;
        }

        function isMobile() {
            var mobile_flag = true;
            if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|XiaoMi|IEMobile)/i)) {
                mobile_flag = true;
            } else {
                mobile_flag = false;
            }
            var screen_width = window.screen.availWidth;
            // var screen_height = window.screen.height;

            //根据屏幕分辨率判断是否是手机
            if(screen_width < 700){
                mobile_flag = true;
            }
            return mobile_flag;
        }
    </script>
</body>
</html>